import { Button, Form, Input, Radio, Select, Table, Space, message } from 'antd';
import { delHttp, getHttp } from '../../../utils/http';
import { useState, useEffect } from 'react';
import city from '../../../utils/city.json';

const { Option } = Select;

export default function index() {
  const [list, setList] = useState([])
  // 当前选中的项
  const [check, setCheck] = useState('all')
  const [cityList, setCityList] = useState([])
  const [arerList, setAreaList] = useState([])

  const [app, setApp] = useState({
    city: '',
    area: '',
    text: '',
    province: ''
  })

  const columns = [{
    title: '序号',
    render: (text: any, record: any, index: any) => `${index + 1}`
  }, {
    title: '小区名称',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  }, {
    title: '面积/㎡',
    render: (text: any) => `${text.acreage}㎡`
  }, {
    title: '总价/w',
    dataIndex: 'prices',
    key: 'prices'
  }, {
    title: '状态',
    render: (text: any) => `${text.state == 0 ? '待审核' : '已通过'}`
  }, {
    title: '操作',
    render: (text: any) => <Space>
      <a>审核</a>
      <a>编辑</a>
      <a onClick={() => { delData(text) }}>删除</a>
    </Space>
  }]

  useEffect(() => {
    getData(check, app)
  }, [check, app])

  // 获取表格数据
  async function getData(check: string, val = app) {
    const { data } = await getHttp('/audit', { check, ...val })
    if (data.code) {
      setList(data.list)
    }
  }

  // 删除表格数据
  async function delData({id}: any) {
    const { data } = await delHttp('/audit', {id})
    if(data.code) {
      message.success('删除成功')
      getData(check, app)
    }
  }

  function changeCityList(code: string) {
    let arr: any = city.find(v => v.code === code)
    setCityList(arr.children)
  }

  function changeAreaList(code: string) {
    let arr: any = cityList.find((v: any) => v.code === code)
    setAreaList(arr.children)
  }

  return (
    <>
      <Radio.Group value={check} onChange={({ target }) => setCheck(target.value)}>
        <Radio.Button value='all'>全部</Radio.Button>
        <Radio.Button value='1'>审核通过</Radio.Button>
        <Radio.Button value='0'>审核不通过</Radio.Button>
      </Radio.Group>
      <Form layout='inline'
        style={{ margin: '20px 0' }}
        onFinish={(val) => { setApp(val) }}>
        <Form.Item name='province'>
          <Select placeholder='请选择省份' onChange={(...value: any) => changeCityList(value[1].key)}>
            {
              city.map(v => {
                return <Option value={v.name} key={v.code}>{v.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item name='city'>
          <Select placeholder='请选择城市' onChange={(...value: any) => changeAreaList(value[1].key)}>
            {
              cityList?.map((v: any) => {
                return <Option value={v.name} key={v.code}>{v.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item name='area'>
          <Select placeholder='请选择区镇'>
            {
              arerList?.map((v: any) => {
                return <Option value={v.name} key={v.code}>{v.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item name='text'>
          <Input placeholder='请输入关键字'></Input>
        </Form.Item>
        <Form.Item>
          <Button htmlType='submit'>搜索</Button>
        </Form.Item>
      </Form>
      <Table dataSource={list} columns={columns} ></Table>
    </>
  )
}
